<template>
	<view class="">
		<view class="">
			<scroll-view scroll-y="true" :style="{'height':scrollHeight}">
				<view class="mt-5" v-if="u_loadmore">
					<u-loadmore status="loading" icon-type="circle" />
				</view>
				<view v-else>
					<view class="m-2 p-3 rounded-20 bg-white d-flex" @click="s_add">
						<u-icon name="plus-circle-fill" color="#ff4343" size="40"></u-icon>
						<view class="ml-3 text-red">
							添加规格属性
						</view>
					</view>
					<view class="m-2 rounded-20 bg-white" v-for="(item,index) in attribute" :key='index'>
						<view class="d-flex flex-column a-cente">
							<u-swipe-action :show="item.show" @click="click" @open="open" :index="index" :options="options">
								<view class=" a-center ml-1 flex py-2 d-flex j-sb clazz" @tap.stop="spec_detail(item)">
									<view class="ellipsis-1">{{item.attr_name}}</view>
									<view class="mr-1">
										<u-icon name="arrow-right" color="#999999" size="35"></u-icon>
									</view>
								</view>		
							</u-swipe-action>
							<view class="ml-3">
								<u-checkbox-group>
									<view class="border-top a-center  py-2 d-flex clazz" v-for="(items, indexs) in item.attr_values" :key="items.value" >
										<u-checkbox shape="circle" v-model="items.show" active-color="red" :size="35"  :name="items.value" @change="changbox(item,indexs)">
											<text class="ellipsis-1">{{items.value}}</text>
										</u-checkbox>
									</view>
								</u-checkbox-group>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="footer"></view>
		<view class="d-flex j-sb sub p-2 position-fixed bottom-0 w-100 bg-white">
			<button type="warn" class="reles" @click="opt_spec">切换规格项目</button>
			<button type="warn" class="rele" @click="edit_spec">编辑规格属性</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				scrollHeight:0, // 屏幕高度
				u_loadmore:true, // 加载中
				attribute:"", // 规格列表
				specification_id:0, // 规格ID
				goods_id:0, // 商品ID
				
				btnWidth: 150,
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#fb0201'
						}
					}				
				]
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.footer').boundingClientRect()
					console.log(resu)
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		methods:{
			click(index, index1) {
				if(index1==0){
					this.$H.post("v2/store/goods/specification/attribute/delete",{
						attr_id:this.attribute[index].attr_id
					}).then(res=>{
						if(res.data){
							this.$u.toast("删除成功")
							this.updata()
						}else{
							this.$u.toast(res.status.error_desc)
						}
					})
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				console.log(index)
				this.attribute[index].show = true;
				this.attribute.map((val, idx) => {
					if(index != idx) this.attribute[idx].show = false;
				})
			},
			
			// 编辑规格属性
			spec_detail(item){
				if(item.attr_input_type=='select'){
					uni.navigateTo({
						url:`/pagesA/goods/spec-detail?specification_id=${this.specification_id}&goods_id=${this.goods_id}&attr_id=${item.attr_id}`
					})
				}else{
					uni.navigateTo({
						url:`/pagesA/goods/spec-input?specification_id=${this.specification_id}&goods_id=${this.goods_id}&attr_id=${item.attr_id}`
					})
				}
			},
			// 添加规格属性
			s_add(){
				uni.navigateTo({
					url:`/pagesA/goods/spec-add?specification_id=${this.specification_id}&goods_id=${this.goods_id}`
				})
			},
			// 切换规格项目
			opt_spec(){
				uni.navigateBack({
					delta:1
				})
			},
			changbox(item,indexs){
				console.log(item,indexs)
				let obj={
					attr_id:item.attr_id,
					value:item.attr_values[indexs].value
				}
				console.log(obj)
				if(!item.attr_values[indexs].show){
					console.log("选中")
					this.$H.post("v2/store/goods/goodsattr/add",{
						goods_id:this.goods_id,
						specification_id:this.specification_id,
						attr_info:JSON.stringify(obj)
					}).then(res=>{
						console.log(res)
					})		
				}else{
					// 删除
					console.log("取消")
					this.$H.post("v2/store/goods/goodsattr/delete",{
						goods_id:this.goods_id,
						specification_id:this.specification_id,
						attr_info:JSON.stringify(obj)
					}).then(res=>{
						console.log(res)
					})	
				}
			},
			// 编辑规格明细
			edit_spec(){
				let num=0
				this.attribute.forEach(v=>{
					v.attr_values.forEach(i=>{
						if(i.show){
							num++
						}
					})
				})
				console.log(num)
				if(num==0){
					this.$u.toast("当前未使用任何规格属性，请先选择使用")
				}else{
					uni.navigateTo({
						url:`/pagesA/goods/spec-particulars?goods_id=${this.goods_id}`
					})
				}
			},
			// 更新列表
			updata(){
				this.$H.post("v2/store/goods/specification/attribute",{
					goods_id:this.goods_id,
					specification_id:this.specification_id
				}).then(res=>{
					this.u_loadmore=false
					let attr_values=res.data
					let newarr=[]
					attr_values.forEach(v=>{
						newarr.push({
							...v,
							show:false,
							attr_values:v.attr_values.reduce((acc,item)=>{
								acc.push({
									value:item,
									show:v.goods_selected_values.some(s=>{
										if(s==item){
											return true
										}else{
											return false
										}
									})
								})
								return acc
							},[])
						})
					})
					this.attribute=newarr
					console.log(newarr)
				})
			}
		},
		onShow() {
			console.log(getApp().globalData.spec_add)
			if(getApp().globalData.spec_add=="添加"){
				this.updata()
				getApp().globalData.spec_add=""
			}
		},
		onLoad(e) {
			console.log(e)
			this.goods_id=e.goods_id
			this.specification_id=e.specification_id
			
			this.$H.post("v2/store/goods/specification/attribute",{
				goods_id:this.goods_id,
				specification_id:this.specification_id
			}).then(res=>{
				this.u_loadmore=false
				let attr_values=res.data
				let newarr=[]
				attr_values.forEach(v=>{
					newarr.push({
						...v,
						show:false,
						attr_values:v.attr_values.reduce((acc,item)=>{
							acc.push({
								value:item,
								show:v.goods_selected_values.some(s=>{
									if(s==item){
										return true
									}else{
										return false
									}
								})
							})
							return acc
						},[])
					})
				})
				this.attribute=newarr
				console.log(newarr)
			})
			
			this.$H.post("v2/store/goods/specification/bind",{
				goods_id:this.goods_id,
				specification_id:this.specification_id
			}).then(res=>{
				console.log(res)
			})
		}
	}
</script>

<style>
	.spec{
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.sub /deep/ .rele{
		width: 45%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.sub /deep/ .reles{
		width: 45%;
		border-radius: 50upx;
		color: #000000;
		background: linear-gradient(to right,#ebebeb,#ebebeb);
	}
	.sub /deep/ button::after{
		border: none;
	}
	.u-swipe-action{
		margin: 20upx;
		border-radius: 20upx;
		background-color: #FFFFFF;
	}
</style>
